{% extends "base.html" %}

{% block title %}用户注册 - 知识图谱系统{% endblock %}

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-6 col-lg-5">
            <div class="card shadow-sm mt-5">
                <div class="card-body p-4">
                    <div class="text-center mb-4">
                        <i class="fas fa-user-plus fa-3x text-success mb-3"></i>
                        <h3>用户注册</h3>
                        <p class="text-muted">创建您的知识图谱账户</p>
                    </div>

                    <form method="POST">
                        <div class="mb-3">
                            <label for="username" class="form-label">用户名</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fas fa-user"></i>
                                </span>
                                <input type="text" class="form-control" id="username" name="username" required
                                       placeholder="请输入用户名">
                            </div>
                            <div class="form-text">用户名长度3-20个字符</div>
                        </div>

                        <div class="mb-3">
                            <label for="email" class="form-label">邮箱地址</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fas fa-envelope"></i>
                                </span>
                                <input type="email" class="form-control" id="email" name="email" required
                                       placeholder="请输入邮箱地址">
                            </div>
                        </div>

                        <div class="mb-4">
                            <label for="password" class="form-label">密码</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fas fa-lock"></i>
                                </span>
                                <input type="password" class="form-control" id="password" name="password" required
                                       placeholder="请输入密码">
                            </div>
                            <div class="form-text">密码长度至少6个字符</div>
                        </div>

                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="agree" required>
                                <label class="form-check-label" for="agree">
                                    我同意<a href="#" class="text-decoration-none">服务条款</a>和<a href="#" class="text-decoration-none">隐私政策</a>
                                </label>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-success w-100 mb-3">
                            <i class="fas fa-user-plus me-2"></i>注册账户
                        </button>
                    </form>

                    <div class="text-center">
                        <p class="mb-0">已有账户？
                            <a href="{{ url_for('login') }}" class="text-decoration-none">立即登录</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// 表单验证
document.querySelector('form').addEventListener('submit', function(e) {
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    if (username.length < 3 || username.length > 20) {
        e.preventDefault();
        alert('用户名长度应在3-20个字符之间');
        return;
    }

    if (password.length < 6) {
        e.preventDefault();
        alert('密码长度至少6个字符');
        return;
    }
});
</script>
{% endblock %}